import CountDownButton from '@/components/CountDownButton';
import {
  confirmPayUp,
  getCaptchaBeforeChange,
} from '@/services/production-center';
import { Col, Form, Input, Modal, Row, Typography, message } from 'antd';
import { useState } from 'react';
const { Text } = Typography;
const ConfirmModal = (props: {
  title?: string;
  changeResData: any;
  currentAliPayName: string;
  onCancel: (success?: boolean) => void;
}) => {
  const { title, changeResData, currentAliPayName = '', onCancel } = props;

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  return (
    <div>
      <Modal
        title={title}
        okText="确认打款"
        okButtonProps={{
          loading,
        }}
        onOk={async () => {
          await form.validateFields();
          setLoading(true);
          const values = form.getFieldsValue();
          try {
            const res = (await confirmPayUp({
              payPassword: values.payPassword,
              checkCode: values.checkCode,
              importBatchNo: changeResData.importBatchNo,
              authMethod: 0,
            })) as any;
            if (res.success) {
              message.success(res.resultMessage);
              onCancel(true);
            } else {
              message.error(res.resultMessage);
            }
          } catch (error) {
          } finally {
            setLoading(false);
          }
        }}
        afterClose={() => {
          form.resetFields();
        }}
        maskClosable={false}
        open={changeResData}
        onCancel={() => {
          onCancel(false);
        }}
        destroyOnClose
      >
        <div className="text-[18px]">
          总笔数：
          <span className="text-[#00bdff] mr-4">
            {changeResData?.totalCount}
          </span>
          总金额：
          <Text className="text-[18px] mr-4" type="success">
            {changeResData?.totalTransAmount}
          </Text>
          服务费:{' '}
          <Text className="text-[18px]" type="success">
            {changeResData?.servicePrice / 100}
          </Text>
        </div>
        <div className="my-3">
          当前支付宝：<span>{currentAliPayName}</span>
        </div>
        <div className="text-[#00bdff] my-4 cursor-pointer">
          备付金余额不足？点击充值
        </div>
        <Form form={form} labelCol={{ span: 5 }}>
          <Form.Item
            rules={[{ required: true, message: '请输入支付密码' }]}
            label="支付密码"
            name={'payPassword'}
            wrapperCol={{ span: 15 }}
          >
            <Input.Password placeholder="请输入支付密码" />
          </Form.Item>
          <Form.Item label="短信验证码" required>
            <Row gutter={8}>
              <Col span={12}>
                <Form.Item
                  rules={[{ required: true, message: '请输入短信验证码' }]}
                  name={'checkCode'}
                >
                  <Input placeholder="请输入短信验证码" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <CountDownButton
                  getCaptchaFn={() => {
                    return getCaptchaBeforeChange({
                      batchId: changeResData?.id,
                      useSpareReceiveMobile: 0,
                    });
                  }}
                />
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ConfirmModal;
